<template>
  <div class="loading_warp">
    <div class="loading">
      <div class="icon"></div>
      <div class="text_wrap">
        <p class="loadingText">玩命加载中</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tip_loading',
  data () {
    return {
      json: []
    }
  },
  methods: {
    closetip () {
      this.$emit('closetip')
    }
  }
}
</script>

<style lang="scss" scoped>
  .loading_warp {
    background-color: rgba(38,38,38,0.45);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    color: #FFF;
    .loading {
      position: absolute;
      top: 45%;
      left: 50%;
      /*width: 75%;*/
      width: 60%;
      height: px2rem(100);
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      overflow: auto;
      margin: 0 auto;
      border-radius: px2rem(10);
      background-color: #FFF;
      border: px2rem(1) solid transparent;
      .icon{
        background: url("../../assets/loading.gif");//这个图自己百度"loading gif"，肯定能找到
        background-size: px2rem(50) px2rem(50); //长宽自己设置
        width: px2rem(50);
        height: px2rem(50);
        /*border: px2rem(2) solid black;*/
        margin: px2rem(10) auto;
      }
      .text_wrap{
        height: px2rem(15);
        line-height: px2rem(15);
        /*border: px2rem(2) solid red;*/
        text-align: center;
        .loadingText {
          font-size: $text-size-normal;
          color: #000;
        }

      }
    }

  }
</style>
